<template>
  <div class="main">
    <PureTableBar title="采购订单列表" class="list_hei">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          size="small" :data="dataList" max-height="600" :columns="columns" :checkList="checkList"
          :pagination="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <div v-if="row.status == 0">
              <el-button type='primary' size="small" text @click="handleOrder(row)"> 处理订单
              </el-button>
            </div>
            <el-button type='success' size="small" text @click="handleOrder(row)" v-else> 查看详情 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <!-- 处理订单 -->
  <ReDialog :width="1000" :height="500" :models="Visible" @Closes="closeVisible()">
    <template #main>
      <el-scrollbar height="420px">
        <div class="Visible_head">
          <h2>采购订单</h2>
          <dl class="date_num">
            <dd>订单编号： <span class="stubim_formorderDate">{{ stubim_form.orderNumber }}</span></dd>
            <el-form-item prop="orderDate">订购日期： <el-date-picker type="date" v-model="stubim_form.orderDate"
                format="YYYY-MM-DD" class="stubim_formorderDate" value-format="YYYY-MM-DD" placeholder="请选择下单日期"
                size="default" disabled /></el-form-item>
          </dl>
        </div>
        <el-form label-width="150px" :model="stubim_form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购方：">
                {{ stubim_form.purchaserInformation }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商：" prop="seiId">
                <el-select v-model="stubim_form.seiId" placeholder="请选择供应商" disabled>
                  <el-option v-for="item in supplierList" :key="item.seiId" :label="item.supplyName"
                    :value="item.seiId" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人：">
                {{ stubim_form.defaultInfo }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人：">
                {{ stubim_form.defaultInfo }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="电  话：">
                {{ stubim_form.defaultInfo }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电  话：">
                {{ stubim_form.defaultInfo }}
              </el-form-item>
            </el-col>
          </el-row>
          <div style="padding:0 10%">
            <table style="margin-bottom: 20px;text-align: center;">
              <tr>
                <th style="width:150px">序号</th>
                <th style="width:150px">物品名称</th>
                <th style="width:100px">单位</th>
                <th style="width:200px">数量</th>
                <th style="width:150px">单价（元/件）</th>
                <th style="width:150px">金额（元）</th>
              </tr>
              <tbody>
                <tr v-for="(item, index) in Visible_formList" :key="item.productId">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.ProductName }}</td>
                  <td>个</td>
                  <td>
                    {{ item.Quantity }}
                  </td>
                  <td>{{ item.Price }}</td>
                  <td>{{ item.total }}</td>
                </tr>
                <tr>
                  <td>总金额（元）</td>
                  <td colspan="5" style="height: 50px;">
                    {{ stubim_form.totalMoney }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购项目名称：" prop="purchaseName">
                {{ stubim_form.purchaseName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交货日期：" prop="deliveryDate">
                <el-date-picker type="date" v-model="stubim_form.deliveryDate" format="YYYY-MM-DD"
                  class="stubim_formorderDate" value-format="YYYY-MM-DD" placeholder="请选择交货日期" size="default" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="交货方式：">
                {{ stubim_form.modeOfDelivery }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交货地址：">
                {{ stubim_form.deliveryAddress }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发票类别：">
                {{ stubim_form.invoiceType }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税率：">
                {{ stubim_form.taxRate }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="支付方式：">
                {{ stubim_form.paymentMethod }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款约定：" prop="paymentAgreement">
                <el-select v-model="stubim_form.paymentAgreement" placeholder="请选择付款约定" disabled>
                  <el-option v-for="item in payList" :key="item.dictId" :label="item.dictName" :value="item.dictId" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购方（盖章）：">
                <span class="mySignet" id="view_FQX"></span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商（盖章）：">
                <span class="mySignet" id="view_FQX1"></span>
                <el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet" v-if="!isSeal"></el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <div v-if="orderType == 0">
          <el-button type="primary" @click="AcceptOrder()"> 接受订单 </el-button>
          <el-button type="danger" @click="RejectOrder()" v-if="!isSeal"> 拒绝订单 </el-button>
          <el-button @click="closeVisible()" v-if="!isSeal"> 关闭 </el-button>
        </div>
      </span>
    </template>
  </ReDialog>
</template>

<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { useEBusinessPurchase } from "./hooks/SupplierOrderManger";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EStamp from "@iconify-icons/ep/stamp";
const {
  Visible,
  columns,
  loading,
  dataList,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  stubim_form,
  Visible_formList,
  payList,
  supplierList,
  RefStubimAddFrom,
  Signet,
  isSeal,
  handleOrder,
  closeVisible,
  AcceptOrder,
  RejectOrder,
  orderType,
} = useEBusinessPurchase()
</script>

<style scoped lang="scss">
@import url("@/style/CreditComm.scss");

.Visible_form {
  display: inline-flex;
  flex-wrap: wrap;
}


.mySignet {
  position: absolute;
  width: 130px;
  height: 130px;
  left: 13%;
  top: 1%;
}


.Visible_head {
  position: relative;
  width: 100%;
  text-align: center;
  line-height: 98px;

  .date_num {
    width: 40%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    text-align: left;

    dd {
      line-height: 38px;
    }
  }
}

.Visible_foot {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 30px 5%;

  dl {
    width: 40%;
    text-align: left;

    dd {
      line-height: 32px;
    }
  }
}

table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

:deep(.stubim_formorderDate) {
  width: 160px;
}

:deep(.el-form-item__label) {
  font-weight: 700
}

:deep(.Visible_dialog .el-dialog__body) {
  padding-top: 10px;
}
</style>

